<template>
  <transition name="fade">
    <div class="media-content" >
      <span v-for="(item,index) in srcList" :key="index" v-bind:item="item"
           v-bind:index="index">
        <el-image v-if="isImg(item)" :src="item" :preview-src-list="srcList" style="width: 100px; height: 100px"/>
        <video :src="item" v-else controls="controls" style="width: 100px; height: 100px"/>
      </span>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    srcList: Array
  },
  methods: {
    isImg(item) {
      const ext = item.substr(item.length - 3, 3)
      const flag = ext === 'jpg' || ext === 'png' || ext === 'gif'
      console.log('isImg:%s, %s', ext, flag)
      return flag
    }
  }
}
</script>

<style lang="scss">
//.media-content {
//  div {
//    position: relative;
//    top: 50%; // background: green;
//    color: #fff;
//    transition: all .56s ease;
//
//    img {
//      max-width: 100%;
//      max-height: 100%
//    }
//
//    video {
//      width: 100%;
//    }
//  }
//}
</style>
